<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="assets/jquery-ui/jquery-ui.min.css">
    <style>
        body {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        #imgCanvas {
            display: block;
            margin: 0 auto;
            border: 1px solid #333333;
        }

        #operLine {
            border: 2px solid #666666;
            display: inline-block;
            width: 181px;
            height: 128px;
            position: absolute;
            top: 0;
            display: none;
            background-size: 100% 100%;
        }

        #operLine:after {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            cursor: move;
        }

        #operLine.move:after {
            background-color: rgba(243, 243, 243, 0.5);
        }

        #operLine .operBtnDelete {
            width: 26px;
            height: 26px;
            position: absolute;
            right: 0;
            top: 0;
            display: inline-block;
            background-image: url("assets/images/ic_close_rt.png");
            background-size: 100% 100%;
            z-index: 1;
            cursor: pointer;
            border-radius: 50px;
            border: 2px solid #ffffff;
        }

    </style>
</head>
<body>

<div style="text-align: center;margin-bottom: 10px;">
    <button id="btnAddOk">添加一个对勾</button>
    <button id="btnSaveImg">保存为base64编码</button>
</div>

<canvas id="imgCanvas" width="950" height="1024"></canvas>

<div id="operLine">
    <div class="operBtnDelete"></div>
</div>

<script src="assets/jquery-3.2.1.min.js"></script>
<script src="assets/jquery-ui/jquery-ui.min.js"></script>
<script src="assets/layer/layer.js"></script>
<script>
    // 所有添加的图片
    var imgs = [{
        url: 'assets/images/img_ok.png',
        x: 0,
        y: 0,
        w: 181,
        h: 128
    }];
    var mIndex = undefined;  // 当前选中的img索引

    // 开始画全部的元素
    function drawAll() {
        var c = document.getElementById("imgCanvas");
        var ctx = c.getContext("2d");
        ctx.clearRect(0, 0, c.width, c.height);  // 清除画布
        // 设置白色背景
        ctx.rect(0, 0, c.width, c.height);
        ctx.fillStyle = '#fff';
        ctx.fill();
        //layer.load(2);
        drawImgs(0, ctx);
    }

    // 递归画所有添加的图片
    function drawImgs(i, ctx) {
        if (i < imgs.length) {
            var tempImg = imgs[i];
            var img = new Image();
            img.src = tempImg.url;
            img.onload = function () {
                ctx.drawImage(img, tempImg.x, tempImg.y, tempImg.w, tempImg.h);
                drawImgs(i + 1, ctx);
            }
        }
    }

    $(function () {

        drawAll();

        // 添加一个对勾
        $('#btnAddOk').click(function () {
            imgs.push({
                url: 'assets/images/img_ok.png',
                x: 400,
                y: 250,
                w: 181,
                h: 128
            });
            drawAll();
            mIndex = imgs.length - 1;
            showOper();
        });

        // 合成图片
        $('#btnSaveImg').click(function () {
            var c = document.getElementById("imgCanvas");
            var base64 = c.toDataURL("image/jpeg", 0.8);
            layer.open({
                title: '合成的图片',
                area: '640px',
                maxHeight: '320px',
                content: '<img src="' + base64 + '" width="580"/><p>' + base64 + '</p>'
            });
        });

        // 框框移动事件
        $(document).on('click', '#imgCanvas', function (e) {
            mIndex = getImgIndex(e.pageX, e.pageY);
            showOper();
        });

        // 框框拖拽事件
        $("#operLine").draggable({
            containment: '#imgCanvas',
            start: function () {
                $('#operLine').addClass('move');
                $('#operLine .operBtnDelete').css('z-index', 0);
            },
            stop: function () {
                if (mIndex != undefined && mIndex < imgs.length) {
                    $('#operLine').removeClass('move');
                    var c = document.getElementById("imgCanvas");
                    imgs[mIndex].x = $('#operLine').position().left - c.getBoundingClientRect().left;
                    imgs[mIndex].y = $('#operLine').position().top - c.getBoundingClientRect().top - $(document).scrollTop();
                    drawAll();
                } else {
                    $('#operLine').css({display: 'none'});
                }
                $('#operLine .operBtnDelete').css('z-index', 1);
            }
        });
        // 框框拉伸事件
        $("#operLine").resizable({
            containment: '#imgCanvas',
            start: function () {
                $('#operLine').addClass('move');
            },
            stop: function () {
                if (mIndex != undefined && mIndex < imgs.length) {
                    $('#operLine').removeClass('move');
                    imgs[mIndex].w = $('#operLine').width();
                    imgs[mIndex].h = $('#operLine').height();
                    drawAll();
                } else {
                    $('#operLine').css({display: 'none'});
                }
            }
        });

        // 删除按钮点击事件
        $('#operLine .operBtnDelete').click(function () {
            if (mIndex != undefined && mIndex < imgs.length) {
                $('#operLine').css({display: 'none'});
                imgs.splice(mIndex, 1);
                mIndex = undefined;
                drawAll();
            }
            return false;
        });

    });

    // 获取当前鼠标与哪个对勾重叠
    function getImgIndex(pageX, pageY) {
        pageY -= $(document).scrollTop();  // 减去滚动条的距离
        var c = document.getElementById("imgCanvas");
        var x = pageX - c.getBoundingClientRect().left;
        var y = pageY - c.getBoundingClientRect().top;
        for (var i = 0; i < imgs.length; i++) {
            var tempImg = imgs[i];
            if (x >= tempImg.x && x <= (tempImg.x + tempImg.w) && y >= tempImg.y && y <= (tempImg.y + tempImg.h)) {
                return i;
            }
        }
    }

    // 移动加框框
    function showOper() {
        if (mIndex != undefined && mIndex < imgs.length) {
            var currentImg = imgs[mIndex];
            var c = document.getElementById("imgCanvas");
            // 修改黑色边框属性
            var x = currentImg.x + c.getBoundingClientRect().left;
            var y = currentImg.y + c.getBoundingClientRect().top;
            $('#operLine').css({
                'width': currentImg.w + 'px',
                'height': currentImg.h + 'px',
                'top': (y + $(document).scrollTop()) + 'px',
                'left': x + 'px',
                'display': 'inline-block',
                'background-image': 'url("' + currentImg.url + '")'
            });
        }
    }

</script>
</body>
</html>